<template>
<div class="appointmentDeal">
    <div slot="footer" class="dialog-footer clearfix">
      <div style="float: left; line-height: 32px;padding-left: 12px;">
        预约处理
        <span style='color: #999;font-size:12px;'>
          基本信息补充与手术信息确认
        </span>
      </div>
      <div style="float: right;">
          <el-button type="primary" @click="submitForm('dialogLeftTop1_3_data',0)">暂存</el-button>
          <el-button type="success" @click="submitForm('dialogLeftTop1_3_data',1)">确认提交</el-button>
          <el-button type="info" @click="cancel">取 消</el-button>
      </div>
    </div>
    <div class="scrollWrap" ref = 'scrollWrap'>
      <div class="appointmentInfoBox">
          <div class="box">
              <appointment-info :appointment = 'appointmentInfo'></appointment-info>
          </div>
      </div>

      <div class="pathBox margin20" >
          <div class="box">
              <h3>手术路径</h3>
              <surgery-path :appointment = 'appointment'></surgery-path>
          </div>
      </div>
      <div class="baseInfoBox margin20">
          <div class="box">
              <h3><span>信息补充</span></h3>
              <base-info
                ref = 'baseInfoForm'
                :dialogLeftTop1_3_data= 'dialogLeftTop1_3_data'>
              </base-info>
          </div>
      </div>
    </div>
</div>
</template>
<script>
import appointmentInfo from '@/yimiviews/components/appointmentInfo'
import surgeryPath from '@/yimiviews/components/path'
import baseInfo from '@/yimiviews/components/baseInfo'
import { appointmentConfirmConst } from '@/yimiviews/appointmentManage/columnsConst'
import { confirm, read, readConfirm } from '@/api/appointmentManage/appointmentConfirm'

export default {
  components: { appointmentInfo, baseInfo, surgeryPath },
  created() {
    this.getPatientInfo()
  },
  mounted() {
    this.setAppMainHeight()
  },
  data() {
    return {
      appointmentConfirmConst,
      dialogLeftTop1_3_data: {
        appointId: '',
        type: 0,
        anesthetistId: '',
        anesthetistName: '',
        anesthetistTel: '',
        schedule: '',
        patient: {
          id: 1,
          patientName: '',
          patientEmail: '',
          idCard: '',
          medicare: '',
          phone: '',
          backupTel: '',
          sex: '',
          birthday: '',
          marry: '',
          nationality: '',
          nation: '',
          educationalLevel: '',
          liveAreaId: [],
          liveStreet: '',
          liveDetailAddr: '',
          birthAreaId: [],
          occupation: '',
          companyName: '',
          companyTel: '',
          companyAreaId: [],
          companyStreet: '',
          companyDetialAddr: '',
          refName: '',
          refRelation: '',
          refTel: '',
          refAreaId: [],
          refStreet: '',
          refDetialAddr: ''
        }
      },
      anticoagulantTypeOther: '',
      formLabelWidth: '120px',
      appointmentInfo: {
        num: 'Y234231029431',
        status: '预约申请',
        applicant: 'admin',
        surgery: '痔疮手术',
        expectTime: '2018-09-06',
        operateDoctor: '孙思邈',
        name: '痔疮手术',
        telephone: '125454555545',
        diagnose: '诊断阿1'
      },
      appointment: {
        path: 1,
        operator1: 'sunsimiao',
        operatorTime1: '2018-12-12',
        operator2: '',
        operatorTime2: '',
        operator3: '',
        operatorTime3: '',
        operator4: '',
        operatorTime4: '',
        operator5: '',
        operatorTime5: '',
        operator6: '',
        operatorTime6: '',
        operator7: '',
        operatorTime7: '',
        operator8: '',
        operatorTime8: '',
        operator9: '',
        operatorTime9: '',
        operator10: '',
        operatorTime10: ''
      }
    }
  },
  methods: {
    getPatientInfo() {
      if (!this.$route.params.id) return
      read(this.$route.params.id).then((res) => {
        this.appointmentInfo = res.data.data
      })
      readConfirm(this.$route.params.id).then((res) => {
        const resData = res.data.data
        resData.patient.liveAreaId = resData.patient.liveAreaId ? resData.patient.liveAreaId.split(',') : []
        resData.patient.birthAreaId = resData.patient.birthAreaId ? resData.patient.birthAreaId.split(',') : []
        resData.patient.companyAreaId = resData.patient.companyAreaId ? resData.patient.companyAreaId.split(',') : []
        resData.patient.refAreaId = resData.patient.refAreaId ? resData.patient.refAreaId.split(',') : []
        if (resData.anesthetistId === 0) {
          resData.anesthetistId = null
        }
        this.dialogLeftTop1_3_data = resData
      })
    },
    cancel() {
      this.$root.closeTag()
    },
    submitForm(formName, type) {
      const valid = this.$refs['baseInfoForm'].submit()
      if (valid) {
        this.dialogLeftTop1_3_data.appointId = this.$route.params.id
        this.dialogLeftTop1_3_data.type = type
        var tipText = ['保存成功！', '提交成功！']
        const postdata = JSON.parse(JSON.stringify(this.dialogLeftTop1_3_data))
        postdata.patient.liveAreaId = postdata.patient.liveAreaId.join(',')
        postdata.patient.birthAreaId = postdata.patient.birthAreaId.join(',')
        postdata.patient.companyAreaId = postdata.patient.companyAreaId.join(',')
        postdata.patient.refAreaId = postdata.patient.refAreaId.join(',')
        confirm(postdata).then((res) => {
          if (res.data.code === 200) {
            this.$message({
              message: tipText[type],
              type: 'success',
              duration: 2000
            })
            if (type === 1) {
              this.$root.closeTag()
            }
          } else {
            this.$message({
              message: res.data.msg,
              type: 'error',
              duration: 2000
            })
          }
        })
      } else {
        this.$message({
          message: '必填项不能为空！',
          type: 'error',
          duration: 2000
        })
      }
    },
    setAppMainHeight() {
      const bodyHeight = document.body.offsetHeight
      const appMainHeight = bodyHeight - 180
      this.$refs.scrollWrap.style.height = appMainHeight + 'px'
    }
  }
}
</script>
<style lang="scss">
.appointmentDeal{
    padding-bottom: 20px;
    background-color: #f0f2f5;
    .margin20{
        margin: 20px;
        background-color: #fff;
    }
    .box{
        padding: 20px;
    }
    .scrollWrap{
      min-height: 100%;
      overflow: auto;
    }
    .dialog-footer {
        padding: 10px;
        background-color: #fff;
        margin-bottom: 20px;
    }
    .appointmentInfoBox{
        background-color: #fff;
        padding: 0 20px;
    }
}
</style>

